<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
    
<canvas id="zero-Zero" width="0" height="0"></canvas>
<canvas id="zero-oneHundred" width="0" height="100"></canvas>
<canvas id="oneHundred-zero" width="100" height="0"></canvas>

<script>

function testToDataURL()
{
    var canvas1 = document.getElementById("zero-Zero")
    var canvas2 = document.getElementById("zero-oneHundred");
    var canvas3 = document.getElementById("oneHundred-zero");

    testMIMEType(canvas1, "0x0", undefined);
    testMIMEType(canvas2, "0x100", undefined);
    testMIMEType(canvas3, "100x0", undefined);

    testMIMEType(canvas1, "0x0"  , "image/jpeg");
    testMIMEType(canvas2, "0x100", "image/jpeg");
    testMIMEType(canvas3, "100x0", "image/jpeg");

    testMIMEType(canvas1, "0x0"  , "image/webp");
    testMIMEType(canvas2, "0x100", "image/webp");
    testMIMEType(canvas3, "100x0", "image/webp");
}

function testMIMEType(canvas, description, mimeType)
{
    var ctx = canvas.getContext("2d");

    // draw into canvas
    ctx.fillStyle = "rgb(200,0,0)";
    ctx.fillRect(10, 10, 55, 50);
    ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
    ctx.fillRect(30, 30, 55, 50);

    var dataURL;

    if (mimeType == undefined) {
        dataURL = canvas.toDataURL();
    } else {
        dataURL = canvas.toDataURL(mimeType);
    }

    assert_equals (dataURL, "data:,");
}

async_test(t => {
        window.onload = function() {
            t.step(testToDataURL);
            t.done();
        }
}, 'Verify that the custom properties on a Canvas 2D rendering context object are retained across GCs.');
</script>
